import { LayoutContentType } from "./layout-element";

export type AlignValue = 'left' | 'center' | 'right';

// 默认值 null, null则不设置
export class LayoutStyles{
    // Container: padding, margin, background，边框  , 圆角

    // Text: Color,  Text Align,  line Height  字大小

    // Image: 边框, 圆角   宽度:百分比，对齐方式默认居中
    padding : Padding;
    margin : Margin;
    backgroundColor: BackgroundColor; 
    border: Border;
    borderRadius: BorderRadius;

    textColor: TextColor;
    textAlign: Align;
    lineHeight : LineHeight;
    fontSize: FontSize;

    width: Width;

    static fromJs(json:any):LayoutStyles{
        json = typeof json === 'object' ? json : {};

        let item = new LayoutStyles();
        item.init(json);

        return item;
    }

    init(_data?: any) {
        if (_data) {
            this.padding = Padding.fromJson(_data["padding"]);
            this.margin = Margin.fromJson(_data["margin"]);
            this.backgroundColor = BackgroundColor.fromJson(_data["backgroundColor"]);
            this.border = Border.fromJson(_data["border"]);
            this.borderRadius = BorderRadius.fromJson(_data["borderRadius"]);

            this.textColor = TextColor.fromJson(_data["textColor"]);
            this.textAlign = Align.fromJson(_data["textAlign"]);
           
            this.lineHeight = LineHeight.fromJson(_data["lineHeight"]);
            this.fontSize = FontSize.fromJson(_data["fontSize"]);
            this.width = Width.fromJson(_data["width"]);
        }
    }

    toArray(contentType: LayoutContentType): {[key:string]:string}{
        let css = {};

        if(contentType === "Image" || contentType === "Video"){
            this.StringToKeyValue(this.textAlign.toString(), css);
            this.StringToKeyValue(this.width.toString(), css);
            this.StringToKeyValue(this.border.toString(), css);
            this.StringToKeyValue(this.borderRadius.toString(), css);

            return css;
        } else{
            if(contentType === "Text" || contentType === "Heading" || contentType === "Html"){
                this.StringToKeyValue(this.textColor.toString(), css);
                this.StringToKeyValue(this.textAlign.toString(), css);
                this.StringToKeyValue(this.lineHeight.toString(), css);
                this.StringToKeyValue(this.fontSize.toString(), css);
            }

            this.StringToKeyValue(this.padding.toString(), css);
            this.StringToKeyValue(this.margin.toString(), css);
            this.StringToKeyValue(this.border.toString(), css);
            this.StringToKeyValue(this.borderRadius.toString(), css);

            this.StringToKeyValue(this.backgroundColor.toString(), css);

            return css;
        }
    }

    private StringToKeyValue(str: string, css:{[key:string]:string}){
        if(str){
            let diyStyles = str.split(';');
            diyStyles.forEach(t => {
                if (t.indexOf(':') > 0) {
                    let s = t.split(':');
                    if (s.length === 2 && s[0] && s[1]) {
                        css[s[0]] = s[1];
                    }
                }
            })
        }
    }
}

//上 右 下 左
export class Padding {

    top: number = 0;
    bottom: number = 0;
    left: number = 0;
    right: number = 0;

    unit: string = 'px';

    toString(){
        if(this.left === this.right){
            if(this.top === this.bottom){
                if(this.top === this.left){
                    if(this.top === 0){
                        return "padding:0;";
                    }
                    return "padding:"+ this.top + this.unit +";";
                } 
                return "padding:"+ this.top + this.unit +" "+ this.left + this.unit +";";
            }
            return "padding:"+ this.top + this.unit +" "+ this.left + this.unit +" "+ this.bottom + this.unit +";";
        }
        return "padding:"+ this.top + this.unit +" "+ this.right + this.unit +" "+ this.bottom  + this.unit +" "+ this.left + this.unit +";";
    }

    static fromJson(json:any):Padding{
        json = typeof json === 'object' ? json : {};

        let item = new Padding();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            if (_data["top"])
                this.top = _data["top"];
            if (_data["bottom"])
                this.bottom = _data["bottom"];
            if (_data["left"])
                this.left = _data["left"];
            if (_data["right"])
                this.right = _data["right"];
            if (_data["unit"]){
                this.unit = _data["unit"];
            }         
        }
    }
}

export class Margin {

    top: number = 0;
    bottom: number = 0;
    left: number = 0;
    right: number = 0;

    unit: string = 'px';

    toString(){
        if(this.left === this.right){
            if(this.top === this.bottom){
                if(this.top === this.left){
                    if(this.top === 0){
                        return "margin:0;";
                    }
                    return "margin:"+ this.top + this.unit +";";
                } 
                return "margin:"+ this.top + this.unit +" "+ this.left + this.unit +";";
            }
            return "margin:"+ this.top + this.unit +" "+ this.left + this.unit +" "+ this.bottom + this.unit +";";
        }
        return "margin:"+ this.top + this.unit +" "+ this.right + this.unit +" "+ this.bottom + this.unit +" "+ this.left + this.unit +";";
    }

    static fromJson(json:any):Margin{
        json = typeof json === 'object' ? json : {};

        let item = new Margin();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            if (_data["top"])
                this.top = _data["top"];
            if (_data["bottom"])
                this.bottom = _data["bottom"];
            if (_data["left"])
                this.left = _data["left"];
            if (_data["right"])
                this.right = _data["right"];
            if (_data["unit"]) {
                this.unit = _data["unit"];
            } 
        }
    }
}

export class BorderRadius{
    topLeft: number = 0;
    topRight: number = 0;
    bottomRight: number = 0;
    bottomLeft: number = 0;

    toString(){
        if(this.bottomLeft === this.topRight){
            if(this.bottomRight === this.topLeft){
                if(this.topLeft === this.topRight){
                    if(this.topLeft === 0){
                        return "border-radius:0;";
                    }
                    return "border-radius:"+ this.topLeft +"px;";
                } 
                return "border-radius:"+ this.topLeft +"px "+ this.topRight +"px;";
            }
            return "border-radius:"+ this.topLeft +"px "+ this.topRight +"px "+ this.bottomRight +"px;";
        }
        return "border-radius:"+ this.topLeft +"px "+ this.topRight +"px "+ this.bottomRight +"px "+ this.bottomLeft +"px;";
    }

    static fromJson(json:any):BorderRadius{
        json = typeof json === 'object' ? json : {};

        let item = new BorderRadius();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            if (_data["topLeft"])
                this.topLeft = _data["topLeft"];
            if (_data["topRight"])
                this.topRight = _data["topRight"];
            if (_data["bottomRight"])
                this.bottomRight = _data["bottomRight"];
            if (_data["bottomLeft"])
                this.bottomLeft = _data["bottomLeft"];
        }
    }
}

export class Border{
    top: BorderValue;
    bottom: BorderValue;
    left: BorderValue;
    right: BorderValue;

    constructor(){
        this.top = new BorderValue();
        this.bottom = new BorderValue();
        this.left = new BorderValue();
        this.right = new BorderValue();
    }

    toString(){
        return "border-top:"+ this.top.toString() +";border-left:"+ this.left.toString() +";border-right:"+ this.right.toString() +";border-bottom:"+ this.bottom.toString() +";";
    }

    
    static fromJson(json:any):Border{
        json = typeof json === 'object' ? json : {};

        let item = new Border();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            this.top = BorderValue.fromJson(_data["top"]);
            this.bottom = BorderValue.fromJson(_data["bottom"]);
            this.left = BorderValue.fromJson(_data["left"]);
            this.right = BorderValue.fromJson(_data["right"]);
        }
    }
}

export class BackgroundColor{
    color: string = '#ffffff';
    diy:boolean = false;
    
    toString(){
        if(this.diy){
            return "background-color:"+ this.color +";";
        }else{
            return "";
        }
    }
    
    static fromJson(json:any):BackgroundColor{
        json = typeof json === 'object' ? json : {};

        let item = new BackgroundColor();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            if (_data["color"])
                this.color = _data["color"];
                this.diy = _data["diy"];
        }
    }
}

export class TextColor{
    color: string = '#333333';
    
    toString(){
        return "color:"+ this.color +";";
    }

    static fromJson(json:any):TextColor{
        json = typeof json === 'object' ? json : {};

        let item = new TextColor();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            if (_data["color"])
                this.color = _data["color"];
        }
    }
}

export class BorderValue{
    width: number = 0;
    color: string = '#ffffff';
    style: string ='solid';
    
    toString(){
        return this.width + "px " + this.style + " " + this.color;
    }

    static fromJson(json:any):BorderValue{
        json = typeof json === 'object' ? json : {};

        let item = new BorderValue();
        item.init(json);

        return item;
    }

    init(_data?: any) {
        if (_data) {
            if (_data["width"])
                this.width = _data["width"];
            if (_data["color"])
                this.color = _data["color"];
            if (_data["style"])
                this.style = _data["style"];
        }
    }
}

export class LineHeight{
    value : number = 0;
    
    unit: string = 'px';

    toString(){
        if(this.value){
            return "line-height:"+ this.value + this.unit +";";
        }
        return "";
    }

    static fromJson(json:any):LineHeight{
        json = typeof json === 'object' ? json : {};

        let item = new LineHeight();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            if (_data["value"])
                this.value = _data["value"];
            if (_data["unit"]) {
                this.unit = _data["unit"];
            }
        }
    }
}

export class Align{
    value : AlignValue = "left";

    toString(){
        return "text-align:"+ this.value +";";
    }

    static fromJson(json:any):Align{
        json = typeof json === 'object' ? json : {};

        let item = new Align();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            if (_data["value"])
                this.value = _data["value"];
        }
    }
}

export class FontSize{
    value : number = 0;
    unit: string = 'px';

    toString(){
        if(this.value){
            return "font-size:"+ this.value + this.unit +";";
        }
        return "";
    }

    static fromJson(json:any):FontSize{
        json = typeof json === 'object' ? json : {};

        let item = new FontSize();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            if (_data["value"])
                this.value = _data["value"];
            if (_data["unit"]) {
                this.unit = _data["unit"];
            } else{
                this.unit = 'px';
            }
        }
    }
}

export class Width{
    value : number = 100;

    toString(){
        return "width:"+ this.value +"%;";
    }

    static fromJson(json:any):Width{
        json = typeof json === 'object' ? json : {};

        let item = new Width();
        item.init(json);

        return item;
    }
    init(_data?: any) {
        if (_data) {
            if (_data["value"])
                this.value = _data["value"];
        }
    }
}